<!-- 运行中策略 -->
<template>
	<view class="content">
		<view class="item-strategy">
			<view class="summary">
				<view class="summary-title row">
					<text class="strategy-name">AI金字塔</text>
					<text class="strategy-name">huobi-u本位-BTC</text>
					<text class="strategy-status stop">运行中</text>
				</view>
			</view>
			<view class="summary">
				<view class="summary-title row">
					<text>投入资金</text>
					<text>累计收益/套利次数</text>
					<text>年华收益</text>
				</view>
				<view class="summary-content row">
					<text>32000(USDT)</text>
					<text>42677USDT/200次</text>
					<text>400%</text>
				</view>
			</view>
			<view class="summary">
				<view class="summary-title row">
					<text>今日收益</text>
					<text>持仓均价/数量</text>
					<text>爆仓价</text>
				</view>
				<view class="summary-content row">
					<text>40.09 USDT</text>
					<text>2000/2.27张</text>
					<text>----</text>
				</view>
			</view>

			<view class="strategy-btn">
				<u-button type="success" shape="square" size="mini" class="share">分享</u-button>
				<view class="set">
					<u-button type="info" shape="square" size="mini" class="share">修改</u-button>
					<u-button type="success" shape="square" size="mini" class="share">启动</u-button>
					<u-button type="primary" shape="square" size="mini" class="share">暂停</u-button>
					<u-button type="warning" shape="square" size="mini" class="share">停止</u-button>
					<u-button type="error" shape="square" size="mini" class="share">删除</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},

		components: {},

		computed: {},

		mounted() {},

		methods: {},
	};
</script>
<style lang='scss' scoped>
	.content {
		color: aliceblue;
		padding-bottom: 100rpx;

		.item-strategy {
			display: flex;
			flex-direction: column;
			background-color: #151e3d;
			border-radius: 20rpx;
			color: cornflowerblue;
			margin: 20rpx;
			padding: 20rpx;

			.item-name {
				margin-bottom: 15rpx;
				font-size: 24rpx;
			}

			.summary {
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;

				.row {
					display: flex;
					margin-bottom: 5rpx;
					flex-direction: row;
					justify-content: space-between;

					.strategy-name {
						color: aliceblue;
					}

					.strategy-status {
						color: aqua;

						&.stop {
							color: orangered;
						}
					}

					text {
						text-align: center;
					}

					&.summary-title {
						font-size: 26rpx;
						margin: 10rpx 0 20rpx 0;
					}

					&.summary-content {
						font-size: 24rpx;
						color: aliceblue;

						text {
							display: flex;
							min-width: 80rpx;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}

			.strategy-btn {
				width: 90vw;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.u-btn {
					margin: 0;
				}
				.set {
					color: #19be6b;
					min-width: 500rpx;
					display: flex;
					justify-content: space-between;
				}
			}

			.date {
				color: aliceblue;
				margin-bottom: 10rpx;
			}
		}

		.earn {
			background-color: #c09358;
			width: 94vw;
			min-height: 240rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;

			.earn-tab {
				padding: 30rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;

				.benefit {
					font-size: 32rpx;
				}
			}
		}

		.earn-item {}
	}
</style>
